<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>login</title>
  <!-- 引入bootstrap.css -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/login.css">
  <!-- 1. 导包 -->
  <!-- <script src="./lib/form-serialize.js"></script> -->
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 提示框 -->
    <div class="alert  my-alert " role="alert">
      提示信息
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form action="javascript:;" class="example-form">
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <input type="text" name="username" class="form-control username" aria-describedby="usernameHelp">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input autocomplete="off" name="password" type="password" class="form-control password">
        </div>
        <button type="submit" class="btn btn-primary btn-login submit"> 登 录 </button>
      </form>
    </div>
  </div>
  <!-- 引入bootstrap.min.js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.2/js/bootstrap.min.js"></script>
  <!-- 引入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
  <!-- 案例核心代码 -->
  <script src="./js/login.js"></script>
  <!-- 1. 导包 -->
  <script src="./lib/form-serialize.js"></script>
  <script>

    /* 步骤分析
    1、给loginBtn按钮绑定点击事件
    2、获取表单值
    3、发送请求
    4、提示登录成功
    */
    const loginBtn = document.querySelector('.submit')
    const usernameDom = document.querySelector('.username')
    const passwordDom = document.querySelector('.password')
    loginBtn.addEventListener('click', () => {
      // const username = usernameDom.value
      // const password = passwordDom.value
      // axios({
      //   url: 'http://hmajax.itheima.net/api/login',
      //   method: "post",
      //   data: {
      //     username,
      //     password
      //   }
      // }).then(res => {
      //   console.log(res, 8);
      //   if (res.data.code == 10000) {
      //     // alert(res.data.message)
      //     myAlert(document.querySelector('.my-alert'), true)
      //   } else {
      //     myAlert(document.querySelector('.my-alert'), false)
      //   }

      // }).catch(err => {
      //   console.log(err, 88);
      //   myAlert(document.querySelector('.my-alert'), false)
      // })

      /* serialize */
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true }) //{id:1,NAME:'JACK'}  id=1&name=jack
      console.log(data, 9);
      const { username, password } = data
      if (username.length < 8) {
        return myAlert(document.querySelector('.my-alert'), false)
      }
      if (password.length < 8) {
        return myAlert(document.querySelector('.my-alert'), false)
      }
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: "post",
        data
      }).then(res => {
        console.log(res, 8);
        if (res.data.code == 10000) {
          // alert(res.data.message)
          myAlert(document.querySelector('.my-alert'), true)
        } else {
          myAlert(document.querySelector('.my-alert'), false)
        }

      }).catch(err => {
        console.log(err, 88);
        myAlert(document.querySelector('.my-alert'), false)
      })

    })

    /*
    show===显示提示框
    alert-success===成功的绿色
    alert-danger====失败的红色
    */
  </script>
</body>

</html>